<template>
  <div id="Start">
    <el-row :gutter="20">
      <el-col :span="8" v-for="(arr, arrIndex) in dataList" :key="arrIndex">
        <el-card class="box-card" v-for="(item, index) in arr" :key="index">
          <el-collapse v-model="activeNames">
            <el-collapse-item
              :title="item.Name"
              :name="'c' + arrIndex"
              :key="'c' + arrIndex"
            >
              <el-row
                type="flex"
                justify="space-between"
                class="rowMargin"
                v-for="(items, indexs) in item.child"
                :key="indexs"
              >
                <el-col :span="22">
                  <el-link :underline="false" @click="sikpMyflow(items)">{{
                    items.Name
                  }}</el-link>
                </el-col>
                <el-col :span="2">
                  <el-popover placement="bottom" width="150" trigger="click">
                    <el-menu class="menuBox">
                      <el-menu-item index="1" @click="menuClick(1)">
                        <span slot="title">
                          <i class="iconfont icon-anli"></i> 列表发起
                        </span>
                      </el-menu-item>
                      <el-menu-item index="2" @click="menuClick(2)">
                        <span slot="title">
                          <i class="iconfont icon-jiedianguanli_1"></i>
                          我发起的流程
                        </span>
                      </el-menu-item>
                      <el-menu-item index="3" @click="menuClick(3)">
                        <span slot="title">
                          <i class="iconfont icon-shenhe"></i> 我审批的流程
                        </span>
                      </el-menu-item>
                      <el-menu-item index="4" @click="menuClick(4)">
                        <span slot="title">
                          <i class="iconfont icon-yulan"></i> 我的流程
                        </span>
                      </el-menu-item>
                      <el-menu-item index="5" @click="menuClick(5)">
                        <span slot="title">
                          <i class="iconfont icon-xianchengchakan"></i> 查询主页
                        </span>
                      </el-menu-item>
                      <el-menu-item index="6" @click="menuClick(6)">
                        <span slot="title">
                          <i class="iconfont icon-jiedianguanli_1"></i>
                          我发起的流程
                        </span>
                      </el-menu-item>
                    </el-menu>
                    <i class="el-icon-view el-icon--right" slot="reference"></i>
                  </el-popover>
                </el-col>
              </el-row>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog title="公共弹窗" :visible.sync="showStartOperation">
      <listInitiate v-if="judgeOperation == 1"></listInitiate>
      <selectiveRecipient v-if="judgeOperation == 2"></selectiveRecipient>
      <div v-if="judgeOperation == 3">我审批的流程</div>
      <div v-if="judgeOperation == 4">我的流程</div>
      <div v-if="judgeOperation == 5">查询主页</div>
      <div v-if="judgeOperation == 6">我发起的流程</div>
    </el-dialog>
  </div>
</template>

<script>
import listInitiate from "./components/listInitiate.vue";
import selectiveRecipient from "./components/selectiveRecipient.vue";
export default {
  name: "Start",
  components: {
    listInitiate,
    selectiveRecipient,
  },

  data() {
    return {
      title: "流程发起",
      activeNames: [],
      dataList: [],
      showStartOperation: false,
      judgeOperation: 0,
    };
  },

  beforeCreate() {},

  created() {
    // this.$store.commit('setData', "阜新")
    // console.log("vuex",this.$store.getters);
    this.loadData();
  },

  methods: {
    // 获取数据
    loadData() {
      let handler = new this.HttpHandler("BP.WF.HttpHandler.WF");
      handler.AddUrlData();
      let data = handler.DoMethodReturnString("Start_Init");
      this.filterData(JSON.parse(data));
    },

    // 过滤数据
    filterData(data) {
      data.Sort.forEach((item) => {
        item.child = [];
        data.Start.forEach((items) => {
          if (item.No == items.FK_FlowSort) {
            item.child.push(items);
          }
        });
      });
      let data1 = data.Sort;
      console.log(data1);
      let brr1 = [];
      let brr2 = [];
      let brr3 = [];
      for (let i = 0; i < data1.length / 3; i++) {
        if (data1[i * 3]) {
          brr1[i] = data1[i * 3];
        }
        if (data1[i * 3 + 1]) {
          brr2[i] = data1[i * 3 + 1];
        }
        if (data1[i * 3 + 2]) {
          brr3[i] = data1[i * 3 + 2];
        }
      }
      this.dataList = [brr1, brr2, brr3];

      for (var i = 0; i < data1.length; i++) {
        this.activeNames.push("c" + i.toString());
      }

      console.log(this.activeNames);
    },
    handleChange(val) {
      console.log(val);
    },

    //跳转myflow
    sikpMyflow(item) {
      console.log(item);
      // this.$router.push("myFlow?FK_Flow=350");
      this.$router.push({
        path: "/myflow",
        query: { FK_Flow: item.No, FromPage: "Start" },
      });
    },

    // 菜单单击
    menuClick(val) {
      console.log(val);
      this.showStartOperation = true;
      this.judgeOperation = val;
    },
  },

  //监听
  computed: {
    opened() {
      return this.dataList.map((i) => {
        return i.Name;
      });
    },
  },

  //监听后执行动作
  watch: {},
};
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
/deep/ .el-card {
  margin-bottom: 20px;
}
/deep/ .el-card__body {
  padding: 10px;
}
/deep/ .el-collapse-item__header {
  height: auto;
  line-height: 1;
  border: none;
  font-size: 1.5rem;
  font-weight: 700;
}
/deep/ .el-collapse {
  border: none;
}
/deep/ .el-collapse-item__wrap {
  border: none;
}
.menuBox {
  border: none !important;
}
/deep/ .el-menu-item {
  height: 40px;
  line-height: 40px;
  padding-left: 5px !important;
}
/deep/ .el-icon-view {
  cursor: pointer;
}
.rowMargin {
  margin: 15px 0;
}
</style>